import React from "react";
import Header from "../../components/Header/Header"
import Footer from "../../components/Footer/Footer"
import Middle from "../../components/Middle/Middle"
export default  class Home extends React.Component{

    //声明状态 数据
    state = {
        middleArr:[
            {title:'html',position:"精通",bol:false},
            {title:'css',position:"了解",bol:false},
            {title:'js',position:"熟练",bol:false},
            {title:'bootstrap',position:"掌握",bol:false},
            {title:'jquery',position:"精通",bol:false},
            {title:'node',position:"精通",bol:false},
            {title:'express',position:"熟练",bol:false},
            {title:'less',position:"掌握",bol:false},
            {title:'promise',position:"精通",bol:false},
            {title:'axios',position:"熟练",bol:false},
            {title:'react',position:"掌握",bol:false},
            {title:'vue2',position:"精通",bol:false},
            {title:'vue3',position:"熟练",bol:false},
            {title:'wechat',position:"掌握",bol:false}
        ],
        num:100,
        str:"我在学习react脚手架"
    }


     //创建方法
     changeMiddle = (i) => {
        return ()=>{
            // alert(i);

            //修改数据
            let newarr = this.state.middleArr.map((item,index) =>{
                if(index === i){
                    this.state.middleArr[i].bol = !this.state.middleArr[i].bol;
                }
                return item;
            })


            //更新数据  diff 比较算法
            this.setState({
                middleArr:newarr
            })

        }
    }



    render(){
        //解构赋值
        let {middleArr,num,str} = this.state;

        return <div>
           
            <Header/>
            {/* <Middle>{this.state.num}{this.state.middleArr}{this.state.str}</Middle> */}

            {/* <Middle  middleArr={middleArr}  num={num} str={str} /> */}

            {/* <Middle  {...this.state}  changeMiddle={this.changeMiddle}/> */}

            <Middle  middleArr={middleArr}   changeMiddle={this.changeMiddle}/> 
            <Footer/>
           
        </div>
    }
}